<template>
  <div>
    <el-dialog
      ref="refDlg"
      :title="formData.id ? '编辑' : '新增'"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="800"
      @close="handleBack"
    >
      <div>
        <el-form ref="refForm" class="financeForm" :rules="formRules" :model="formData" size="mini" label-width="130px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="附件类型:" size="mini" prop="attachmentType">
                <el-input v-model="formData.attachmentType" placeholder="请输入附件类型" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属模块:" size="mini" prop="belongModel">
                <c-dict-select v-model="formData.belongModel" dict-type-code="BELONG_MODEL" placeholder="所属模块" @change="changeAcceptType" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="附件对应文件类型:" size="mini" prop="fileTypeArr">
                <el-select v-model="formData.fileTypeArr" size="mini" multiple placeholder="请选择附件对应文件类型" style="width:100%" @change="changeFileType">
                  <el-option v-for="item in fileTypeList" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
                </el-select>
                <!-- <c-dict-select v-model="formData.fileType" dict-type-code="ATTACHMENT_TYPE" multiple placeholder="附件对应文件类型" @change="changeAcceptType" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="启用状态:" size="mini" prop="enable">
                <span>{{ formaterData(enableList, formData.enable) }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- <div v-for="item in fileTypeList" :key="item.id"> -->
        <div>
          <div class="qup-title-box">
            <span class="border" /><span>附件上传</span>
          </div>
          <file-uploader
            :data="dataFileList"
            :file-type="fileTypeStr"
            :limit="20"
            @remove="removeFile"
            @upload-success="uploadSuccessFile"
          />
        </div>
        <!-- </div> -->
      </div>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictByPatchType } from '@/api/dataDict'
import { getAnnexDetail, saveAnnexData } from '@/api/basicData'
import { getShopAttachment } from '@/api/decorate'
import fileUploader from '@/components/importFile'
// :config-attachment-id="item.id"
export default {
  name: 'AddAnnexConfig',
  components: { fileUploader },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      id: '',
      flag: '',
      fileTypeStr: '',
      dataFileList: [],
      acceptTypeList: [],
      fileTypeList: [],
      hasDuty: false,
      formData: {
        fileTypeArr: [],
        enable: 1
      },
      formRules: {
        attachmentType: [{ required: true, message: '请输入附件类型' }],
        belongModel: [{ required: true, message: '请选择所属模块' }],
        fileTypeArr: [{ required: true, message: '请选择附件对应文件类型' }]
      },
      enableList: [
        { dictName: '启用', dictCode: 1 },
        { dictName: '停用', dictCode: 0 }
      ]
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getDictByPatchTypeAll(['ATTACHMENT_TYPE']).then(res => {
      this.fileTypeList = res.ATTACHMENT_TYPE
    })
    if (this.detailData.data) {
      this.id = this.detailData.data.id
      this.flag = this.detailData.flag
      getAnnexDetail(this.id).then(res => {
        if (res.success && res.data) {
          this.formData = res.data
          const fileTypeArr = this.convertDataFormat(this.formData.fileType)
          this.$set(this.formData, 'fileTypeArr', fileTypeArr)
          this.fileTypeStr = this.formData.fileType
        }
      })
    }
    this.getFiles(this.id)
  },
  methods: {
    // 获取附件
    getFiles(id) {
      getShopAttachment(id).then(res => {
        this.dataFileList = res.data
      })
    },
    removeFile(data) {
      this.dataFileList = [...data.list]
    },
    uploadSuccessFile(data) {
      this.dataFileList = [...data.list]
    },
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr || !arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    convertDataFormat(str) {
      if (!str || !str.length) return
      const arr = str.split(',')
      return arr
    },
    // 选择附件对应类型
    changeFileType(value) {
      this.fileTypeStr = value.toString()
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交
    submitForm() {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          // return
          this.formData.fileType = this.formData.fileTypeArr.toString()
          this.formData.shopAttachmentDTOS = this.dataFileList
          saveAnnexData(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              const isNew = !this.formData.id
              this.$emit('success', isNew)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
